<template>
    <view v-if="show" @click="handleClose" class="popup big">
        <view
            class="container pt-50 pb-60 br-40 column align-center"
            :class="[show ? 'dh1' : '', isClose ? 'dh2' : '']"
            @click.stop="() => {}"
        >
            <view class="FZGongYeHei t-3 title center pl-24">真的要放弃巨额优惠吗？</view>
            <view class="container-but center" @click.stop="handleBack">财大气粗，不需要</view>
            <view class="container-but continue center t-w" @click.stop="handleClose"
                >继续作答</view
            >
        </view>
    </view>
</template>

<script setup>
/**
 * @description 用户退出前的提示弹窗
 * 二内容区限制了点击不可关闭的冒泡事件
 * @author yinzhi
 * @date 2025-03-11
 */
import { ref, defineComponent } from 'vue'
defineComponent({
    name: 'ExitPopup'
})

// 定义 props
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})

// 是否点击关闭
const isClose = ref(false)

const emit = defineEmits()

// 关闭弹窗 主要是为了增加关闭动画加的定时器
const handleClose = () => {
    isClose.value = true
    let time = setTimeout(() => {
        emit('close')
        isClose.value = false
        time && clearTimeout(time)
    }, 300)
}

// 返回上一级页面
const handleBack = () => {
    uni.navigateBack({
        delta: 1,
        fail: err => {
            uni.reLaunch({
                url: '/pages/index/index'
            })
        }
    })
}
</script>

<style scoped lang="scss">
.container {
    background: $uni-bg-color;
    width: calc(100% - 100rpx);
    height: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    left: 50rpx;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
    border: 1px solid #302d2d;
    &-but {
        width: 60%;
        height: 80rpx;
        border: 6rpx solid #37b64a;
        margin-top: 30rpx;
        border-radius: 40rpx;
        line-height: 1;
    }
    .continue {
        background: #43cd29;
    }
    .title {
        font-size: 50rpx;
    }
}
.container.dh1 {
    animation: move1 600ms;
}
@keyframes move1 {
    0% {
        top: 150%;
    }
    100% {
        top: 50%;
    }
}
.container.dh2 {
    animation: move2 600ms;
}
@keyframes move2 {
    0% {
        top: 50%;
    }
    100% {
        top: 150%;
    }
}
.popup {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: 0.3);
    z-index: 10100;
}
</style>
